<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {marked} from 'marked'
const router = useRouter()
const route = useRoute()

const newsDetail = ref(null)

// 组件挂载时从API获取特定新闻数据
onMounted(() => {
  fetchNewsDetail()
})


// 从API获取特定新闻详情
const fetchNewsDetail = () => {
  const newsId = route.params.id
  
  fetch(`/news/newsList?current=1&currentSize=1000`)
    .then((res) => res.json())
    .then((res) => {
      // 根据API返回的实际数据结构进行映射
      const apiData = res.data || {}
      const listData = apiData.records || []

      
      const pendingData = listData

      // 找到ID匹配的新闻
      const newsItem = pendingData.find((item) => item.id == newsId)
      
      if (newsItem) {
        // 将API数据映射为组件需要的格式
        newsDetail.value = {
          id: newsItem.id,
          newsTitle: newsItem.newsTitle || newsItem.title,
          classReal: newsItem.classReal,
          abstractReal: newsItem.abstractReal,
          newsSource: newsItem.newsSource,
          opPerson: newsItem.opPerson,
          siteName: newsItem.siteName,
          coverImage: newsItem.coverImage,
          createTime: newsItem.createTime,
          pubTime: newsItem.pubTime,
          isPublished: newsItem.isPublished,
          markContent: newsItem.markContent,
        }
      }
    })
    .catch((error) => {
      console.error('获取新闻详情失败:', error)
      newsDetail.value = null
    })
}

</script>

<template>
  <div class="common-layout">
    <header class="header">
      <div class="header-left">
        <img src="../../assets/logo.png" />
        <span>战略微头条</span>
      </div>
      <div class="header-right">
        <img class="exit-icon" src="../../assets/bowout.svg" />
        <span class="exit-text" @click="router.push('/preview')">退出预览</span>
      </div>
    </header>
    <div>
      <div class="phone-container">
        <!-- 手机外壳 -->
        <div class="Newsphone">
          <!-- 屏幕内容 -->
          <div class="screenContent">
            <div>
              <img src="../../assets/phone-head.png" />
            </div>

            <!-- 标题区域 -->
            <div class="Newsheader flex items-center">
              <img src="../../assets/左箭头.svg" class="w-4 h-4 mr-18 cursor-pointer" @click="router.go(-1)" />
              <h1>战略微头条</h1>
            </div>

            <!-- 新闻详情 -->
            <div class="weekly-info w-full flex-1 overflow-y-auto [scrollbar-width:none]" v-if="newsDetail">
              <div class="weekly-title">{{ newsDetail.newsTitle }}</div>

              <div class="read-item">
                <img :src="newsDetail.coverImage" class="w-5 h-5"/>
                <span>{{ newsDetail.siteName }}</span>
              </div>

              <!-- 新闻摘要 -->
              <div class="detail-summary">
                <p>{{ newsDetail.abstractReal }}</p>
                <span class="expand-btn">展开</span>
              </div>

              <!-- 新闻正文内容 -->
              <div class="detail-content">
                <p v-html="newsDetail.markContent && marked.parse(newsDetail.markContent)"></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.common-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 60px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e6e6e6;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-right {
  display: flex;
  align-items: center;
}

.header > :nth-child(1) img {
  width: 100px;
  height: 40px;
  margin-right: 10px;
  vertical-align: middle;
}

.exit-icon {
  width: 20px;
  height: 20px;
}

.header:nth-child(1) span {
  font-size: 20px;
  font-weight: 700;
  margin-left: 10px;
}

.exit-text {
  font-size: 20px;
  cursor: pointer;
}

.phone-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 60px);
  background-color: #f5f5f5;
  padding: 20px;
  overflow: auto;
}

.Newsphone {
  width: 320px;
  height: 650px;
  background-color: #1a1a1a;
  border-radius: 42px;
  position: relative;
  padding: 10px;
}

.screenContent {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
}

.Newsheader {
  text-align: center;
  padding: 10px 0 15px;
  border-bottom: 1px solid #eeeeee;
  margin: 0 15px;
}

.Newsheader h1 {
  font-size: 18px;
  font-weight: 600;
  color: #333333;
  margin: 0;
}

.weekly-info {
  padding: 20px 15px;

}

.weekly-title {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 15px;
  line-height: 1.4;
}

.read-item {
  display: flex;
  gap: 10px;
  color: #999999;
  font-size: 13px;
  margin-bottom: 20px;
}

.news-weekly {
  text-align: center;
  margin: 25px 0;
  position: relative;
  color: #1e88e5;
  font-size: 18px;
  font-weight: 700;
}

.diamond {
  margin: 0 8px;
}

.small-diamond {
  width: 20px;
  height: 20px;
}

.big-diamond {
  width: 20px;
  height: 20px;
}

.news-item {
  padding: 10px 0;
  margin-bottom: 15px;
}

.news-title {
  font-size: 16px;
  font-weight: 700;
  color: #333333;
  margin-bottom: 10px;
  line-height: 1.4;
}

.news-source {
  color: #999999;
  font-size: 13px;
  margin-bottom: 10px;
}

.news-summary {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-bottom: 15px;
}

.read-more {
  color: #1e88e5;
  font-size: 14px;
  text-decoration: none;
}

/* 摘要区域样式 */
.detail-summary {
  background-color: #f5f5f5;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-summary p {
  font-size: 12px;
  color: #8b8b8b;
  line-height: 12px;
}

.expand-btn {
  color: #1890ff;
  font-size: 12px;
  cursor: pointer;
  margin-left: 10px;
  white-space: nowrap;
}

.detail-content {
  font-size: 14px;
  line-height: 1.8;
}

</style>
